<template>
  <div class="box" style="">
    <div id="inside" class="flex" >

    </div>
    <div id="outside" class="flex">

    </div>
  </div>
</template>

<script>
  export default {
    name: "InsideAndOutside",
    data() {
      return {
        option1: {
          title:{
            text:'局内',
            left:'center',
            top:10,
            textStyle:{
              color:'#fff',
              width:60,
              height:30,
            },
          },
          left:'center',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['一级', '二级', '三级', '四级'],
              axisTick: {
                alignWithLabel: true
              },
              axisLine:{
                lineStyle:{
                  color:'#fff'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine:{
                lineStyle:{
                  color:'#fff'
                }
              }
            }
          ],
          series: [
            {
              name:'局内',
              type: 'bar',
              barWidth: '40%',
              data: [10,200, 390, 220]
            }
          ]
        },
        /******************/
        option2: {
          title:{
            text:'局外',
            left:'center',
            top:10,
            textStyle:{
              color:'#fff',
              width:60,
              height:30,
            },
          },
          left:'center',
          tooltip: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['一级', '二级', '三级', '四级'],
              axisTick: {
                alignWithLabel: true
              },
              axisLine:{
                lineStyle:{
                  color:'#fff'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine:{
                lineStyle:{
                  color:'#fff'
                }
              }
            }
          ],
          series: [
            {
              name:'局外',
              type: 'bar',
              barWidth: '40%',
              data: [10,200, 390, 220]
            }
          ]
        },
      }
    },
    mounted() {
      let insideChart = this.$echarts.init(document.getElementById('inside'));
      insideChart.setOption(this.option1);
      let outsideChart = this.$echarts.init(document.getElementById('outside'));
      outsideChart.setOption(this.option2);
    }
  }
</script>

<style scoped>
  .box {
    width: 1180px;
    height: 380px;
    display: flex;
  }
  .flex{
    flex: 1;
    width: 100%;
    background-color: rgba(37, 80, 174, 0.55);
  }
  .flex:first-child{
    margin-right: 10px;
  }
</style>
